<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <title></title>
</head>
<body class="layui-view-body">
<div class="layui-content" id="app">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-header">表单</div>

            <form action=""><!-- class="layui-form layui-card-body" -->

                <div class="layui-form-item">
                    <label class="layui-form-label">数据链接</label>
                    <div class="layui-input-block">
                        <!-- <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                          </select> -->
                        <select lay-verify="required" name="city" v-model="origin" @change="changeDB($event)">
                            <option value="0">请选择</option>
                            <option v-for="db in list" :value="db.id">{{db.dbTypeName}}</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">源数据库</label>
                    <div class="layui-input-block">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        </select>
                        <!-- <select lay-verify="required" name="city" v-model="" @change="">
                          <option value="0">请选择</option>
                          <option v-for="orDB in list1":value="orDB.id">{{orDB.username}}</option>
                        </select> -->
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">表</label>
                    <div class="layui-input-block">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">字段</label>
                    <div class="layui-input-block">

                        <input type="checkbox" name="like[read]" title="请选择" checked>
                        <input type="checkbox" name="like[read]" title="请选择">

                    </div>
                </div>


                <hr>
                <br>


                <div class="layui-form-item">
                    <label class="layui-form-label">数据链接</label>
                    <div class="layui-input-block">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">目标数据库</label>
                    <div class="layui-input-block">
                        <select name="city" lay-verify="required">
                            <option value=""></option>
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                            <option value="2">广州</option>
                            <option value="3">深圳</option>
                            <option value="4">杭州</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">表名</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" placeholder="请输入表名" autocomplete="off" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-blue" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="../assets/layui.all.js"></script>
<script src="../vue.min.js"></script>
<script src="../axios.min.js"></script>
<script>
    var form = layui.form
        , layer = layui.layer;
</script>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            list: [],
            list1: [],
            origin: 0


        },
        created: function () {
            this.getLinkName();
        },
        methods: {

            // login: function(){
            //     _this = this;
            //     axios.post("http://localhost:9004/auth/login",this.user).then(function(response){

            //         console.log(response.status);	//服务器返回的信息
            //         console.log(response.headers.authorization);
            //         if(response.status == 200){
            //             localStorage.setItem('username',_this.user.username);
            //             location.href="index.html";
            //         }

            //     }).catch(function(error){
            //         //alert(error);
            //         alert("用户名或密码不正确");
            //     })
            // },

            getLinkName: function () {
                var Authorization = localStorage.getItem('Authorization');
                console.log("====" + Authorization);
                // var Authorization = localStorage.getItem('Authorization');,{headers:{'Authorization': Authorization}}
                //console.log(Authorization);
                _this = this;
                axios.get('http://localhost:9005/dba/dbaController/getLinkName', {headers: {'Authorization': Authorization}}).then(function (result) {
                    console.log(result.data.data);
                    _this.list = result.data.data;
                }).catch(function () {
                    console.log("异常");
                })
            },

            changeDB: function (event) {//源数据库的触发事件
                var Authorization = localStorage.getItem('Authorization');
                //var Authorization = localStorage.getItem('Authorization');
                this.origin = event.target.value; //获取数据库连接信息
                window.localStorage.setItem("linkid", this.origin);
                axios.post("http://localhost:9005/dba/dbaController/getDatabaseByLinkId/" + this.origin, {headers: {'Authorization': Authorization}}).then(function (result) {//数据库
                    console.log(result.data.data);
                    _this.list1 = result.data.data;

                })
            }
        }
    })
</script>
</body>
</html>